<template>
    <div class="page_article art_list" id="article_list">
        <div class="warp art_warp" v-if="$check_action('/article/list','get')">
            <div class="container">
                <div class="row art_warp">
                    <div class="col-12 col-md-9 ">
                        <div class="card_article h-100 mb">
                            <div class="article_list_title">
                                <span class="title">{{$page_title("/article/list") || "文章列表"}}</span>
                               
                            </div>
                            <div class="leis_box">
                                <div class="iudis_box">
                                    <!-- 搜索栏 -->
                                    <div class="search_box">
                                        <b-form-input
                                                size="sm"
                                                class="mr-sm-2"
                                                placeholder="局部搜索"
                                                v-model.trim="search_val"
                                                @keyup.enter="submit_search"
                                        />
                                        <b-button size="sm" @click="submit_search"
                                        >
                                            <b-icon icon="search"/>
                                        </b-button>
                                    </div>
                                    <div class="filter_block">
                                <!-- 筛选 -->
                                    <div class="bar_filter">
                                        <b-dropdown :text="title" variant="outline-dark" left>
                                            <b-dropdown-item
                                                    v-for="(o, i) in list_article_type"
                                                    :key="i"
                                                    @click="filter_article(o)"
                                            >
                                                {{ o }}
                                            </b-dropdown-item>
                                        </b-dropdown>
                                    </div>
                                    <!-- /筛选 -->
                                    <!-- 排序 -->
                                    <div
                                            class="bar_sort"
                                            :class="{ active: query.orderby == '`hits` desc' }"
                                    >
                                        <b-dropdown text="排序" variant="outline-dark" left>
                                            <b-dropdown-item
                                                    v-for="(o, i) in sort_list"
                                                    :key="i"
                                                    @click="sort_goods(o)"
                                            >
                                                {{ o.name }}
                                            </b-dropdown-item>
                                        </b-dropdown>
                                    </div>
                                    <!-- /排序 -->
                            </div>
                                </div>
                                  <!-- 文章列表 -->
                                <list_article :list="list"/>
                            </div>
                           
                          
                            <!-- 分页器 -->
                            <div class="col overflow-auto flex_cc">
                                <b-pagination
                                    v-model="query.page"
                                    :total-rows="count"
                                    :per-page="query.size"
                                    @change="goToPage"
                                />
                            </div>
                        </div>
                    </div>

                    <div class="col-12 col-md-3">
                        <div class="card_article_hot">
                            <div class="hot_title">
                                {{$page_title("/article/list")+"热门列表" || "文章热门列表"}}
                            </div>
                            <!-- 文章热门列表card_article_hot -->
                            <list_article_hot :list="list_hot"/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import list_article from "@/components/diy/list_article.vue";
    import list_article_hot from "@/components/diy/list_article_hot.vue";
    import mixin from "@/mixins/page.js";

    export default {
        mixins: [mixin],
        components: {
            list_article,
            list_article_hot,
        },
        data() {
            return {
                url_get_list: "~/api/article/get_list?",
                list: [],
                query: {
                    page: 1,
                    size: 12,
                },
                list_hot: [],
                count_pages: 1,
                list_article_type: [],
                title: "",
                sort_list: [
                    {
                        name: "热度从高到低",
                        value: "hits desc",
                    },
                    {
                        name: "热度从低到高",
                        value: "hits asc",
                    },
                    {
                        name: "创建时间从高到低",
                        value: "create_time desc",
                    },
                    {
                        name: "创建时间从低到高",
                        value: "create_time asc",
                    },
                ],
                search_val: ""
            };
        },
        methods: {
            /**
             * 请求文章列表后
             * @param {Object} json 响应对象
             */
            get_list_after(json) {
            },
            /**
             * 重新获取全部数据
             */
            get_all_list() {
                this.query = {
                    page: 1,
                    size: 10,
                };
                this.get_list();
            },

            /**
             *  搜索
             * */
            submit_search() {
                this.$router.push({
                    path: "/search/details",
                    query: {
                        word: this.search_val,
                        search_key: "title",
                        search_type: "article",
                        search_title: "文章",
                    },
                });
            },
            /**
             * 获取热门文章
             */
            get_hot_article() {
                this.$get(
                    "~/api/article/get_list",
                    {
                        page: 1,
                        size: 8,
                        orderby: "hits desc",
                    },
                    (res) => {
                        if (res.result) {
                            this.list_hot = res.result.list;
                        }
                    }
                );
            },
            /**
             * 获取文章类型
             */
            get_article_type() {
                this.$get(
                    "~/api/article_type/get_list",
                    {
                        page: 1,
                        size: 0,
                    },
                    (res) => {
                        if (res.result) {
                            console.log(res.result)
                            this.list_article_type.push("全部");
                            res.result.list.map((o) => this.list_article_type.push(o.name));
                        }
                    }
                );
            },
            /**
             * 筛选选择
             */
            filter_article(o) {
                if (o == "全部") {
                    this.query.type = 0;
                } else {
                    this.query.type = o;
                }
                this.search();
            },
            /**
             * 排序
             */
            sort_goods(o) {
                this.query.orderby = o.value;
                this.search();
            },
            goToPage(v){
              this.query.page = v;
              this.goToNew(v)
            }
        },
        mounted() {
            this.title = "筛选";
            this.get_hot_article();
            this.get_article_type();
        },
    };
</script>

<style scoped>

    .article_list_title {
      margin: 0 0.5rem;
      background-color: #d2d2d2;
      color: white;
      display: flex;
      height: 4rem;
      align-items: center;
      justify-content: space-between;
      border-radius: 0.5rem;
    }

    .title {
      font-size: 1.5rem;
      font-weight: bold;
      padding-left: 1rem;
    }

    .search_box {
      width: 12rem;
      display: flex;
      height: 4rem;
      justify-content: center;
      align-items: center;
      padding-right: 1rem;
    }

    .flex_cc {
        margin-top: 2rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .card_article_hot{
        color: white;
        background-color: var(--color_primary);
        margin: 0.5rem;
        border-radius: 0.5rem;
    }

    .hot_title {
        height: 4rem;
        font-size: 1.2rem;
        font-weight: bold;
        align-items: center;
        justify-content: center;
        display: flex;
        margin-bottom: 1rem;
    }

    [class*="card_"] {
        padding: 0.5rem;
    }

    .article_list h4 {
        font-size: 20px;
    }

    .article_list {
        padding-left: 1px;
    }

    .container {
        min-height: 800px;
    }

    .list_hot h4 {
        font-size: 20px;
    }

    .filter_block {
      margin: 1rem 0.5rem 0.5rem 0.5rem;
      display: flex;
      flex-direction: row;
      justify-content: start;
    }

    .bar_filter {
        display: flex;
        align-items: center;
    }

    li {
        list-style: none;
    }

    .bar_sort {
        margin-left: 5px;
    }


</style>
